<template>
  <el-drawer
      v-model="showDrawer"
      :title="title"
      :size="size"
      :direction="direction"
      :destroy-on-close="destroyOnClose"
  >
    <div class="formDrawer">
      <slot></slot>
    </div>
    <template #footer>
      <div>
        <!-- 使用 confirmText prop -->
        <el-button type="primary" @click="submit" :loading="loading">{{ props.confirmText }}</el-button>
        <el-button @click="close">取消</el-button>
      </div>
    </template>
  </el-drawer>
</template>

<script setup lang="ts">
import {ref} from 'vue'
import type {DrawerProps} from 'element-plus'

const showDrawer = ref(false)
const direction = ref<DrawerProps['direction']>('rtl')
const props = defineProps({
  title: String,
  size: {
    type: String,
    default: '45%'
  },
  destroyOnClose: {
    type: Boolean,
    default: false
  },
  confirmText: {
    // 修正拼写错误，将 defalut 改为 default
    type: String,
    default: '提交'
  }
})
const loading = ref(false)

// 显示加载过程
const showLoading = () => (loading.value = true)

const hiddeLoading = () => (loading.value = false)
// 打开抽屉
const open = () => {
  showDrawer.value = true
}
// 关闭抽屉
const close = () => {
  showDrawer.value = false
}
// 提交
const emit = defineEmits(['submit'])

const submit = () => {
  emit('submit')
}

// 向父组件暴露以下方法
defineExpose({
  open,
  close,
  showLoading,
  hiddeLoading
})
</script>

<style>
.formDrawer {
  width: 100%;
  height: 100%;
  position: relative;
  /* @apply bg-red-300; */
}
</style>
